<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <link rel="stylesheet" href="./css/common.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <style>
        li {
            height: 50px;
            margin-top: 1px;
        }
        
        input {
            height: 35px;
            flex-grow: 1;
            border: 1px solid #ebebeb;
            margin-left: 15px;
            text-indent: 10px;
        }
        
        button {
            margin-top: 50px;
            width: 50px;
            height: 50px;
            background-color: green;
        }
    </style>
</head>

<body>
    <header>
        <a href="./list.html">列表</a>
        <a href="./add.html">添加</a>
    </header>

    <div id="box" class="mt-5">
        <li class="flex jc-sb aic f18 bg-fff pl-15 pr-5">
            <span>头像地址:</span> <input type="text" id="head" placeholder="必填">
        </li>
        <li class="flex jc-sb aic f18 bg-fff pl-15 pr-5">
            <span>爱豆名字:</span> <input type="text" id="name" placeholder="必填">
        </li>
        <li class="flex jc-sb aic f18 bg-fff pl-15 pr-5">
            <span>爱豆年龄:</span> <input type="number" id="age" placeholder="必填">
        </li>
        <li class="flex jc-sb aic f18 bg-fff pl-15 pr-5">
            <span>爱豆职业:</span> <input type="text" id="profession" placeholder="选填">
        </li>
        <li class="flex jc-sb aic f18 bg-fff pl-15 pr-5">
            <span>爱豆作品: </span><input type="text" id="word" placeholder="选填">
        </li>
    </div>

    <p class="fcc"> <button class="btn" onclick="obj.add()">提交</button></p>
    <script>

       var obj={
            add(){
                var headUrl=$('#head').val()
                var name=$('#name').val()
                var age=$('#age').val()
                var profession=$('#profession').val()
                var word=$('#word').val()
                if (headUrl=='' || name=='' || age=='') {
                    alert('爱豆的头像、名字、年龄不能为空哟')
                    return false
                }
                    $.ajax({
                        url:'http://localhost:8880/inster',
                        type: "post",
                        data:{
                            headUrl:headUrl,
                            name:name,
                            age:age,
                            profession:profession,
                            word:word
                        },
                        dataType:'json',
                        success:function(res){
                            if(res.code==666){
                                alert(res.msg)
                            }
                        },
                        error:function(error){
                            console.log(error)
                        }
                    })
            }
        }
    </script>
</body>

</html>